<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="数据">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>X轴名称</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input placeholder="请输入" v-model="obj.tableData.xAxisName" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>Y轴名称</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input placeholder="请输入" v-model="obj.tableData.yAxisName" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>Z轴名称</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input placeholder="请输入" v-model="obj.tableData.zAxisName" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据表格</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                        @change="tableSelectChange">
                        <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <div class="griditem" v-for="(item, index) in obj.tableData.barList" :key="'selecty' + index">
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>数据名称</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <input placeholder="请输入" v-model="item.name" />
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>X轴</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-select v-model="item.xLineId" filterable clearable placeholder="请选择数据" size="mini">
                            <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>Y轴</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-select v-model="item.yLineId" filterable clearable placeholder="请选择数据" size="mini">
                            <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>Z轴</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-select v-model="item.zLineId" filterable clearable placeholder="请选择数据" size="mini">
                            <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>折线颜色</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-color-picker popper-class="mycolorview" v-model="item.lineColor" size="small" show-alpha
                            :predefine="predefineColors"
                            @active-change="setColorChange(obj.tableData.barList[index], 'lineColor', $event)" />
                    </el-col>
                </el-row>
                <i class="el-icon-error zzlistbtn" v-if="index > 0"
                    @click="deleteDataYinfo(obj.tableData.barList, index)"></i>
            </div>
            <div class="addybtn" @click="addDataYinfo(obj.tableData.barList)">
                + 新增折线
            </div>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据量</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.count" max="1000" type="number"
                        @change="setValueMaxInfo(1000, obj.tableData, 'count')" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>x轴刻度范围</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <span>min</span>
                    <input v-model.number="obj.tableData.fwData[0].min" type="number" style="width:50px;margin:0 10px;" />
                    <span>max</span>
                    <input v-model.number="obj.tableData.fwData[0].max" type="number" style="width:50px;margin:0 10px;" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>y轴刻度范围</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <span>min</span>
                    <input v-model.number="obj.tableData.fwData[1].min" type="number" style="width:50px;margin:0 10px;" />
                    <span>max</span>
                    <input v-model.number="obj.tableData.fwData[1].max" type="number" style="width:50px;margin:0 10px;" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>z轴刻度范围</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <span>min</span>
                    <input v-model.number="obj.tableData.fwData[2].min" type="number" style="width:50px;margin:0 10px;" />
                    <span>max</span>
                    <input v-model.number="obj.tableData.fwData[2].max" type="number" style="width:50px;margin:0 10px;" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>刷新间隔</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input type="number" v-model.number="obj.tableData.reloadTime" class="miniinput"
                        @change="reloadTimeChangeHandle" />
                    <span>秒</span>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="样式">
            <el-collapse v-model="collapseActives" class="edittypeform">
                <el-collapse-item title="图形" name="1">
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>折线粗细</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <input placeholder="请输入" type="number" min="1" v-model.number="obj.tableData.lineWidth"
                                style="width:114px;" />
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>显网格线</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.tableData.isShowGrid"></el-checkbox>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="标题" name="4">
                    <title-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"
                        :setFontStyle="setFontStyle"></title-form>
                </el-collapse-item>
            </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "Grid3DForm",
    props: {
        predefineColors: Array,
        obj: Object,
        dataTableList: Array,
        setFontStyle: Function,
        setColorChange: Function,
        columnData: Array,
        tableSelectChange: Function,
        setValueMaxInfo: Function,
        deleteDataYinfo: Function,
        reloadTimeChangeHandle: Function,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    components: {
        TitleForm: () => import('../mixin/TitleForm.vue'),
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    data() {
        return {
            collapseActives: ['1', '2', '3', '4', '5'],
            defaultColor: "",
        }
    },
    methods: {
        setColorChange(item, attr, val) {
            item[attr] = val;
            this.$emit("change", this.obj);
        },
        addDataYinfo(item, len = 10) {
            if (item.length >= 10) {
                this.$message.error("已达到可设置最大数据列");
                return false;
            }

            item.push({
                name: "",   //数据名称
                xLineId: "",
                yLineId: "",
                zLineId: "",
                lineColor: this.predefineColors[item.length],
            });
        },
    }
}
</script>

<style>
.griditem {
    background: #fff;
    position: relative;
    border-radius: 5px;
    padding-right: 10px;
    margin-top: 10px;
}

.zzlistbtn {
    cursor: pointer;
}
</style>